<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			body{padding-bottom: 300px;}
		</style>
	</head>
	<body>
		
		<h1>
			源码地址
			<a href="https://gitee.com/maplemei/xm-select">https://gitee.com/maplemei/xm-select</a>
		</h1>

		<h3>这是一个多选</h3>
		<div id="demo1"></div>

		<h3>这是一个国际版多选</h3>
		<div id="demo2"></div>

		<h3>有基础数据</h3>
		<div id="demo3"></div>

		<h3>有选中, 禁用的</h3>
		<div id="demo4"></div>

		<h3>自定义key</h3>
		<div id="demo5"></div>

		<h3>使用template自己构建选项1</h3>
		<div id="demo6"></div>

		<h3>使用template自己构建选项2</h3>
		<div id="demo7"></div>

		<h3>简单的展示形式1</h3>
		<div id="demo8"></div>

		<h3>简单的展示形式2</h3>
		<div id="demo9"></div>

		<h3>自定义展示</h3>
		<div id="demo10"></div>

		<h3>多余的用 +隐藏</h3>
		<div id="demo11"></div>

		<h3>不显示删除图标</h3>
		<div id="demo12"></div>

		<h3>换一个主题</h3>
		<div id="demo13"></div>

		
		<script src="./dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var demo1 = xmSelect.render({
				el: '#demo1', 
				language: 'zn',
				isShow: true,
			})

			var demo2 = xmSelect.render({
				el: '#demo2', 
				language: 'en'
			})

			var demo3 = xmSelect.render({
				el: '#demo3', 
				data: [
					{name: '水果', value: 1},
					{name: '蔬菜', value: 2},
					{name: '桌子', value: 3},
				]
			})

			var demo4 = xmSelect.render({
				el: '#demo4', 
				data: [
					{name: '水果', value: 1, selected: true, disabled: true},
					{name: '蔬菜', value: 2, selected: true},
					{name: '桌子', value: 3, disabled: true},
					{name: '北京', value: 4},
				]
			})

			var demo5 = xmSelect.render({
				el: '#demo5', 
				data: [
					{label: '水果', val: 1, sel: true, dis: true},
					{label: '蔬菜', val: 2, sel: true},
					{label: '桌子', val: 3, dis: true},
					{label: '北京', val: 4},
				],
				prop: {
					name: 'label',
					value: 'val',
					selected: 'sel',
					disabled: 'dis'
				}
			})

			var demo6 = xmSelect.render({
				el: '#demo6', 
				data: [
					{name: '水果', value: 1, selected: true, disabled: true},
					{name: '蔬菜', value: 2, selected: true},
					{name: '桌子', value: 3, disabled: true},
					{name: '北京', value: 4},
				],
				template: function(item, sels, name, value){
					return name  + '<span style="color: red; margin-left: 20px;">'+value+'</span>' 
				}
			})

			var demo7 = xmSelect.render({
				el: '#demo7', 
				data: [
					{name: '水果', value: 1, selected: true, disabled: true},
					{name: '蔬菜', value: 2, selected: true},
					{name: '桌子', value: 3, disabled: true},
					{name: '北京', value: 4},
				],
				template: function(item, sels, name, value){
					return name  + '<span style="position: absolute; right: 10px; color: red">'+value+'</span>' 
				}
			})

			var demo8 = xmSelect.render({
				el: '#demo8', 
				data: [
					{name: '水果', value: 1, selected: true, disabled: true},
					{name: '蔬菜', value: 2, selected: true},
					{name: '桌子', value: 3, disabled: true},
					{name: '北京', value: 4},
				],
				model: {
					label: {
						type: 'text',
						text: {
							left: '<',
							right: '>',
							separator: ', ',
						},
					}
				}
			})

			var demo9 = xmSelect.render({
				el: '#demo9', 
				data: [
					{name: '水果', value: 1, selected: true, disabled: true},
					{name: '蔬菜', value: 2, selected: true},
					{name: '桌子', value: 3, disabled: true},
					{name: '北京', value: 4},
				],
				model: {
					label: {
						type: 'count',
						count: {
							template(data, sels){
								return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
							}
						}
					}
				}
			})

			var demo10 = xmSelect.render({
				el: '#demo10', 
				data: [
					{name: '水果', value: 1, selected: true, disabled: true},
					{name: '蔬菜', value: 2, selected: true},
					{name: '桌子', value: 3, disabled: true},
					{name: '北京', value: 4},
				],
				model: {
					label: {
						type: 'count',
						count: {
							template(data, sels){
								return "我是自定义的... 已选中 " + sels.length + " 项, 共 " + data.length + " 项"
							}
						}
					}
				}
			})

			var demo11 = xmSelect.render({
				el: '#demo11', 
				data: [
					{name: '水果', value: 1, selected: true, disabled: true},
					{name: '蔬菜', value: 2, selected: true},
					{name: '桌子', value: 3, disabled: true},
					{name: '北京', value: 4},
				],
				model: {
					label: {
						type: 'block',
						block: {
							showCount: 1,
						}
					}
				}
			})

			var demo12 = xmSelect.render({
				el: '#demo12', 
				data: [
					{name: '水果', value: 1, selected: true, disabled: true},
					{name: '蔬菜', value: 2, selected: true},
					{name: '桌子', value: 3, disabled: true},
					{name: '北京', value: 4},
				],
				model: {
					label: {
						type: 'block',
						block: {
							showCount: 1,
							showIcon: false,
						}
					}
				}
			})

			var demo13 = xmSelect.render({
				el: '#demo13', 
				data: [
					{name: '水果', value: 1, selected: true, disabled: true},
					{name: '蔬菜', value: 2, selected: true},
					{name: '桌子', value: 3, disabled: true},
					{name: '北京', value: 4},
				],
				theme: {
					color: 'red',
				},
			})
		</script>
		
	</body>
</html>
